<script setup>
defineProps(['list']);
</script>

<template>
  <ul class="staff-list">
    <template v-for="item in list" :key="item.key">
      <li>
        <span class="name ellipsis" :title="item.realName">{{ item.realName }}</span>
        <slot name="fn" :item="item"></slot>
      </li>
    </template>
  </ul>
</template>

<style>
.staff-list > li {
  display: flex;
  align-items: center;
  gap: .5em;
}

.staff-list > li:not(:last-child) { margin-bottom: .75em; }

.staff-list .name {
  flex: 1;
  width: 0;
}

.staff-list .ant-btn {
  height: 100%;
  border: 0;
  margin-left: auto;
}
</style>
